<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>goodsList</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <!--弹出层-->
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<h1 align="center">商品列表</h1>
<div id = "app">
    <from>
        goods_name<input type="text" name="goods_id" v-model="addForm.goods_name"> <br>
        goods_count<input type="text" name="goods_name" v-model="addForm.goods_count"> <br>
        goods_price<input type="text" name="goods_count" v-model="addForm.goods_price"> <br>
        type_id<input type="text" v-model="addForm.type_id"> <br>
        <button type="button" @click="add">添加商品</button>
    </from>
    <div style="width: 800px;margin: 10px auto;">
            <form>
                <input type="text" v-model = "searchGoods" >
                <button type="button" @click="search">搜索</button>
            </form>

    </div>

    <table width="800px" align="center">
        <tr>
            <td>goods_id</td>
            <td>goods_name</td>
            <td>goods_count</td>
            <td>goods_price</td>
            <td>type_id</td>
            <td>操作</td>
        </tr>
        <tr v-for = "g,index in goodsList" v-if = "index>=pageSize*(currentPage-1) & index<=pageSize*currentPage-1">
            <td>{{g.goods_id}}</td>
            <td>{{g.goods_name}}</td>
            <td>{{g.goods_count}}</td>
            <td>{{g.goods_price}}</td>
            <td>{{g.type_id}}</td>
            <td>
                <button type="button" @click="delGood(g.goods_id)">删除</button>
                |
                <button type="button" @click="updateUI(g)">修改</button>
            </td>
        </tr>
    </table>
    <div class="block" style="text-align: center">
        <el-pagination
                background
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                :current-page="currentPage"
        >
        </el-pagination>
    </div>
    <!--弹出层-->
    <div id="updateUI" style="display: none">
        <input type="hidden" v-model="updateForm.goods_id">
        goods_name:<input type="text" name="goods_name" v-model="updateForm.goods_name"> <br>
        goods_count:<input type="text" name="goods_count" v-model="updateForm.goods_count"> <br>
        goods_price:<input type="text" name="goods_price" v-model="updateForm.goods_price"> <br>
        type_id:<input type="text" name="type_id" v-model="updateForm.type_id"> <br>
        <button type="button" @click="update">修改</button>
    </div>
</div>



<script>
    axios.defaults.baseURL = "http://localhost:8080/web/"

    axios.interceptors.request.use(function (config) {
        config.headers.contentType = "application/json";
        return config;
    });
    let app = new Vue({
        el: "#app",
        created(){
            this.findAll();
        },
        data:{
            goodsList:null,
            total:"",
            pageSize:3,
            currentPage:1,
                searchGoods:"",
            //设置弹出层的内容
            updateForm:{
                goods_id:"",
                goods_name:"",
                goods_count:"",
                goods_price:"",
                type_id:""
            },
            //增加商品信息
            addForm:{
                goods_id:"",
                goods_name:"",
                goods_count:"",
                goods_price:"",
                type_id:""
            },
            //弹出层返回的值
            w:null
        },
        methods: {
            findAll() {
                let self = this;
                axios.get("goods",{params:{name:self.searchGoods}}).then(function (response) {
                    if (response.data.code == 200) {
                        self.goodsList = response.data.data;
                        self.total = self.goodsList.length;
                        return
                    }
                    console.log("出错: " + response.data.msg);
                });
            },
            handleCurrentChange(val) {
                this.findAll();
                this.currentPage = val;
                console.log("当前页: " + val);
            },

            /*删除商品*/
            delGood(id) {
                let self = this;
                axios.delete("goods/" + id).then(function (response) {
                    if (self.total % self.pageSize == 1){
                        self.currentPage--;
                    }
                    self.findAll();
                });
            },
            /*给弹出层回显信息*/
            updateUI(g){
                this.updateForm.goods_id = g.goods_id;
                this.updateForm.goods_name = g.goods_name;
                this.updateForm.goods_count = g.goods_count;
                this.updateForm.goods_price = g.goods_price;
                this.updateForm.type_id = g.type_id;

                this.w = layer.open({
                    title: "修改商品",
                    type: 1,
                    content: $("#updateUI")
                });
            },
            /*修改商品*/
            update() {
                let self = this;
                axios.put("goods",this.updateForm).then(function (response) {
                    self.findAll();
                    //修改后关闭弹出层
                    layer.close(self.w);
                });
            },
            search(){
                let self = this;
                axios.get("goods",{params:{name:self.searchGoods}}).then(function (response) {
                    if (response.data.code == 200) {
                        self.goodsList = response.data.data;
                        self.total = self.goodsList.length;
                        return
                    }
                    console.log("出错: " + response.data.msg);
                });
            },
            /*增加商品*/
            add(){
                let config ={
                    headers:{
                        "Content-Type":"application/json"
                    }
                }
                let self = this;

                axios.post("goods", this.addForm, config).then(function (response){
                    self.findAll();
                    self.addForm = "";
                })
            }
        },
    });
   </script>
</body>
</html>